<template>
  <div class="container-widget table-widget" ref="container">
    <div class="table-widget-label">{{item.label}}</div>
    <div class="container-widget-content">
      <div class="row" :class="'gutter-' + item.gutter">
        <div v-for="(column, index) in item.columns" :key="index" class="col-"
          :style="`width:${column.width||'33.3%'};min-width:${column.minWidth||'33.3%'};`">
          <div class="column-name" :style="`text-align:${column.textAlign||item.headerAlign||'center'};`">
            {{column.title||`#`}}
          </div>
          <container-widget class="kw-component" :item="column" :is-container="true"></container-widget>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { containerMixin } from '../mixins/widget'
  export default {
    name: 'table-widget',
    mixins: [containerMixin],
    props: {
      item: {
        default() {
          return {
            gutter: 0,
            components: [],
            columns: []
          }
        }
      }
    }
  }
</script>

<style lang="less">
  .table-widget {
    background-color: #fff;
    border: 1px solid #c8c8ca;
    .column-name {
      padding: 5px;
      border: 1px solid #c8c8ca;
    }
    .container-widget {
      .container-widget-body {
        margin: 0;
      }
    }
    .table-widget-label {
      font-weight: bold;
      padding: .5rem;
    }
    .kw-componentview {
       > .kw-componentview-border {
          > .kw-componentview-label {
            display: none;
          }
       }
    }
  }
</style>